<template>
	<el-main style="margin-top:20px">
		<el-row :gutter="20">
			<el-col :span="4"></el-col>
			<el-col :span="16">
				<div class="block">
					<el-timeline>
						<el-timeline-item v-for="item in list" :key="item.recordId" :timestamp="item.happenTime" placement="top" @click="showDetails(item)" style="cursor: pointer;">
							<el-card>
								<h4>{{item.title}}</h4>
								<div style="margin: 20px">
									<el-image v-for="(url,index) in item.mainPic.split(',')" :key="index" :src="url" style="width: 100px;height: 100px;margin-left: 10px;"></el-image>
								</div>
								<p>{{item.subheading}}<span style="margin-left: 20px">{{item.happenTime}}</span></p>
							</el-card>
						</el-timeline-item>
					</el-timeline>
				</div>
			</el-col>
			<el-col :span="4"></el-col>
		</el-row>
	</el-main>
	<storyDetails v-if="dialog.detailsSave" ref="interDialog" @closed="dialog.detailsSave=false"></storyDetails>
</template>
<script>
import storyDetails from './storydetails'
export default {
	components: {
		storyDetails
	},
	data() {
		return{
			dialog: {
				save: false,
				detailsSave:false
			},
			list:[]
		}
	},
	mounted() {
		this.getBigStoryList();
	},
	methods:{
		async getBigStoryList(){
			let res = await this.$API.info.bigStory.getBigStoryList.get();
			if(res.code==200)
			{
				this.list = res.data;
			}
		},
		showDetails(item){
			this.dialog.detailsSave = true
			this.$nextTick(() => {
				this.$refs.interDialog.open().setData(item);
			})
		}

	}
}
</script>
